<template>
  <div>
    <el-row
      :gutter="24"
      class="row-bg">
      <el-col
        :span="12"
        style="overflow: hidden">
        <device-actived/>
      </el-col>
      <el-col
        :span="12"
        style="overflow: hidden">
        <div
          class="whole_setion"
          style="margin-bottom:20px;padding-right: 80px;">月活量: </div>
        <ve-line
          :data="chartData"
          :text-style="textStyle"
          :settings="chartSettings"
          :extend="extend"
          :judge-width="true"
          :legend="legend"
          :loading="chartLoading"
          :colors="colors"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commonMixin from '@/mixins/common'
import deviceActived from './device-actived'
export default {
  components: { deviceActived },
  mixins: [ commonMixin ],
  data () {
    this.textStyle = {
      color: 'white'
    }
    this.legend = {
      show: false,
      data: [
        { name: '微波炉', icon: 'rect' },
        { name: '大烤箱', icon: 'rect' },
        { name: '蒸汽炉', icon: 'rect' },
        { name: '小烤箱', icon: 'rect' },
        { name: '扫地机', icon: 'rect' }
      ],
      // selected: {
      //   '小烤箱': false
      // },
      textStyle: {
        color: 'white',
        fontSize: 18
      }
    }
    this.colors = ['#ff69ec', '#2196F3', '#FFA500', '#00d4b8', '#FF7F50']
    this.extend = {
      series: {
        label: {
          normal: {
            show: false,
            position: 'top',
            formatter: function (params) {
              let numData = params.data[1]
              let num = (Math.floor(numData) / 10000).toFixed(1) + 'w'
              return num
            }
          }
        }
      },
      xAxis: {
        splitLine: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255, .6)'
          }
        }
      },
      yAxis: {
        splitLine: false,
        axisLabel: {
          formatter: function (params) {
            var str = params
            // if (params <= 100) {
            //   str = params * 100 + '%'
            // }
            if (params > 100) {
              str = (params / 10000) + 'w'
            }
            return str
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255, .6)'
          }
        }
      }
    }

    return {
      chartLoading: true,
      loading: false,
      activeVal: 0,
      chartSettings: {
        labelMap: {
          'B0quantity': '微波炉',
          'B1quantity': '大烤箱',
          'B2quantity': '蒸汽炉',
          'B4quantity': '小烤箱',
          'B8quantity': '扫地机'
        },
        yAxisType: ['KMB']
        // min: [100],
        // max: [60000]
      },
      // colors: ['#6e7074', '#546570'],
      chartData: {
        columns: ['month', 'B0quantity', 'B1quantity', 'B2quantity', 'B4quantity', 'B8quantity'],
        rows: []
      }
    }
  },
  // watch: {
  //   activeVal (v) {
  //     this.$nextTick(_ => {
  //       this.$refs[`${v}`].echarts.resize()
  //     })
  //   }
  // },
  created () {
    this.initDeviceData()
  },
  methods: {
    async initDeviceData () {
      this.loading = true
      let context = this
      // 设备激活
      let url = this.getApiUrl('datapanel/show/deviceAllActive', false)
      let { data: res } = await this.$http.get(url)
      var newb0 = []
      var newb1 = []
      var newb2 = []
      var newb8 = []
      var rowData = []
      if (res.code === 0 || res.code === 200) {
        let data = res.data
        for (let i = 0; i < data.length; i++) {
          if (data[i].deviceType === '微波炉') {
            newb0.push(data[i])
          }
          if (data[i].deviceType === '大烤箱') {
            newb1.push(data[i])
          }
          if (data[i].deviceType === '蒸汽炉') {
            newb2.push(data[i])
          }
          // if (data[i].deviceType === '小烤箱') {
          //   newb4.push(data[i])
          // }
          if (data[i].deviceType === '扫地机器人') {
            newb8.push(data[i])
          }
        }
        for (let k = 0; k < newb0.length; k++) {
          let obj = { 'month': newb0[k].month, 'B0quantity': newb0[k].huoyue_amount, 'B1quantity': newb1[k].huoyue_amount, 'B2quantity': newb2[k].huoyue_amount, 'B8quantity': newb8[k].huoyue_amount }
          rowData.push(obj)
        }
        context.chartData.rows = rowData
        context.loading = false
      }
    }
  }
}
</script>

<style>
.whole_setion{
  font-size: 22px;
  color: white;
}
.number_section{
  font-size: 34px;
  font-weight: bold;
  color: white;
}
</style>
